<script setup lang="ts">
import { reactive, ref, onUnmounted } from 'vue';
import { useNurseStore, useNursesStore } from '@/store';
import { useNurses } from '@/service';
import { showToast, showLoading, hideLoading } from '@tarojs/taro';
import { SUCCESS_MSG_DURATION } from '@/constants';
import { useNurseGetAuthInfo, useImage } from '@/hooks';
import { storeToRefs } from 'pinia';
import { localStg } from '@/utils';

const { imageUrl } = useNurseStore();

definePageConfig({
    navigationBarTitleText: '个人信息设置'
});

onUnmounted(() => useNurseGetAuthInfo());

const { edit } = useNurses();

const { nurseNurses } = storeToRefs(useNursesStore());

const formData = ref(nurseNurses);

const ruleForm = ref<any>(null);

const token = localStg.get('token');
const headers = ref({
    'Content-Type': 'multipart/form-data',
    'X-Access-Token': token
});

const submit = async () => {
    const { valid } = await ruleForm.value.validate();

    if (!valid) return;

    showLoading({ title: '正在保存...' });
    const { error } = await edit({ ...formData.value });
    hideLoading();
    if (!error) {
        showToast({
            title: '保存成功',
            icon: 'success',
            duration: SUCCESS_MSG_DURATION
        });
    }
};

function uploadDelete() {
    formData.value.avatar = undefined;
}

function uploadSuccess({ data }: any) {
    const result = JSON.parse(data.data);

    const { message, success } = result;

    if (success && message) formData.value.avatar = message;
}
const defaultFileList = reactive<any>([
    {
        name: '头像',
        url: formData.value.avatar && useImage(formData.value.avatar),
        status: 'success',
        message: '上传成功',
        type: 'image'
    }
]);
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="个人信息设置" showLeft /> -->
        <view class="w-375px flex-col-center">
            <view class="w-360px">
                <nut-form ref="ruleForm" class="w-full" :model-value="formData">
                    <nut-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请填写姓名' }]">
                        <nut-input v-model="formData.name" placeholder="请输入姓名" type="text" />
                    </nut-form-item>

                    <nut-form-item label="联系电话" prop="phone" :rules="[{ required: true, message: '请填写联系电话' }]">
                        <nut-input v-model="formData.phone" placeholder="请输入联系电话" type="text" />
                    </nut-form-item>
                    <nut-form-item class="flex-center" label="头像" prop="name"
                        :rules="[{ required: false, message: '' }]">
                        <nut-uploader v-model:file-list="defaultFileList" disabled :multiple="false" :headers="headers"
                            :maximize="1024 * 2000"
                            :url="`${imageUrl}/sys/common/upload?biz=weapp/nurses/${formData?.id}`" maximum="1"
                            @success="uploadSuccess" @delete="uploadDelete"></nut-uploader>
                    </nut-form-item>
                    <nut-form-item label="性别" prop="sex" :rules="[{ required: false, message: '请选择性别' }]">
                        <NutRadioGroup v-model="formData.sex" direction="horizontal">
                            <nut-radio :disabled="false" label="1">男</nut-radio>
                            <nut-radio :disabled="false" label="2">女</nut-radio>
                        </NutRadioGroup>
                    </nut-form-item>
                    <nut-form-item label="身份证号" prop="idcard" :rules="[{ required: false, message: '请填写身份证号' }]">
                        <nut-input v-model="formData.idcard" placeholder="请输入身份证号" type="text" />
                    </nut-form-item>
                    <nut-cell>
                        <basic-button text="保存" class="mt-2" @on-click="submit" />
                    </nut-cell>
                </nut-form>
            </view>
        </view>
    </basic-layout>
</template>
<style lang="scss">
.h5-img,
.h5-video {
    max-width: 100%;
    height: 100%;
}
</style>
